<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>轮播图插件-swiper</title>

    <link href="./../../../static/plugins/swiper/swiper-bundle.css" rel="stylesheet" />
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
    
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            基本轮播
                        </div>
                        <div class="panel-body">
                            <div id="swiper1" class="swiper" style="height: 185px;">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/5.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/2.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/3.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/4.jpg">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            循环轮播
                        </div>
                        <div class="panel-body">
                            <div id="swiper2" class="swiper" style="height: 185px;">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/5.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/2.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/3.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/4.jpg">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            自动轮播
                        </div>
                        <div class="panel-body">
                            <div id="swiper3" class="swiper" style="height: 185px;">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/5.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/2.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/3.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/4.jpg">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            轮播箭头
                        </div>
                        <div class="panel-body">
                            <div id="swiper4" class="swiper" style="height: 185px;">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/3.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/1.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/2.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/4.jpg">
                                        </a>
                                    </div>
                                </div>
                                <div class="swiper-button-next arrow-next-4"></div>
                                <div class="swiper-button-prev arrow-prev-4"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            分页组件
                        </div>
                        <div class="panel-body">
                            <div id="swiper5" class="swiper" style="height: 185px;">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/3.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/1.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/2.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/4.jpg">
                                        </a>
                                    </div>
                                </div>
                                <div class="swiper-button-next arrow-next-5"></div>
                                <div class="swiper-button-prev arrow-prev-5"></div>
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            自定义分页指示器
                        </div>
                        <div class="panel-body">
                            <div id="swiper6" class="swiper" style="height: 185px;">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/3.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/1.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/2.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/4.jpg">
                                        </a>
                                    </div>
                                </div>
                                <div class="swiper-pagination swiper-pagination-circle"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            进度条
                        </div>
                        <div class="panel-body">
                            <div id="swiper7" class="swiper" style="height: 185px;">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/3.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/1.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/2.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/4.jpg">
                                        </a>
                                    </div>
                                </div>
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            带内容
                        </div>
                        <div class="panel-body">
                            <div id="swiper8" class="swiper" style="height: 185px;">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/5.jpg">
                                        </a>
                                        <div style="position: absolute; left: 10px; top: 10px; color: #ffffff;">
                                            <H5>春日里的太阳</H5>
                                            <p>那满脸的笑容，恰似春日里的太阳</p>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/2.jpg">
                                        </a>
                                        <div style="position: absolute; left: 10px; top: 10px; color: #ffffff;">
                                            <H5>春日里的太阳</H5>
                                            <p>那满脸的笑容，恰似春日里的太阳</p>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/3.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/4.jpg">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel">
                        <div class="panel-heading">
                            纵向轮播
                        </div>
                        <div class="panel-body">
                            <div id="swiper9" class="swiper" style="height: 185px;">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/3.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/1.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/2.jpg">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="./../../../static/img/banner/4.jpg">
                                        </a>
                                    </div>
                                </div>
                                <div class="swiper-pagination"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>

    <script src="./../../../static/plugins/swiper/swiper-bundle.js"></script>

    <script>
        new Swiper("#swiper1");
        new Swiper("#swiper2", {
            loop: true
        });
        new Swiper("#swiper3", {
            autoplay: {
                delay: 500,
            },
            loop: true,
        });
        new Swiper("#swiper4", {
            loop: true,
            navigation: {
                nextEl: ".arrow-next-4",
                prevEl: ".arrow-prev-4",
            },
        });
        new Swiper("#swiper5", {
            loop: true,
            navigation: {
                nextEl: ".arrow-next-5",
                prevEl: ".arrow-prev-5",
            },
            pagination: {
                el: ".swiper-pagination",
            },
        });
        new Swiper("#swiper6", {
            loop: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                renderBullet: function (index, className) {
                    return '<span class="' + className + '">' + (index + 1) + "</span>";
                },
            },
        });
        new Swiper("#swiper7", {
            loop: true,
            pagination: {
                el: ".swiper-pagination",
                type: "progressbar",
            },
        });
        new Swiper("#swiper8", {
            loop: true,
        });
        new Swiper("#swiper9", {
            direction: "vertical",
            slidesPerView: 1,
            spaceBetween: 30,
            mousewheel: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });

    </script>
</body>

</html>